<#assign contextPath=springMacroRequestContext.getContextPath() />
<#import "/public/frame/main.html" as frame />
<@frame.head "">
</@frame.head>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest 上传文件进度条示例</title>
    <script type="text/javascript" src="${contextPath}/resources/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="${contextPath}/resources/js/tool/ckeditor/ckeditor.js"></script>
    <link rel="stylesheet" href="${contextPath}/resources/static/h-ui/css/H-ui.css">
    <style>
        .z-main{
            border:1px solid orange;
        }
        .panel-body{
            overflow: hidden;
        }
        .z-video{ 
            width: 325px;
            height: 180px;
            background-color: #e6e6e6;
        }
        .z-video h3{
            margin-top: 33px;
        }
        .z-video .progress{
            margin-top: 30px;
            width: 100% !important;
        }
        .z-video input{
            margin-top: 30px;
        }
        #novideo p {
            margin-top: 50px;
        }
        #novideo input{
            margin: auto;
         }
         .iconload{
            display: block;
            width: 50px;
            height: 50px;
            margin: 40px auto 0 auto;
        }
        .z-img {
            width: 325px;
            height: 180px;
            background-color: #e6e6e6;
        }
        .z-img label{
            margin-top: 60px;
        }
        .z-img span{
            display: block;
        }
        .row{
            margin-top: 10px;
        }
        .row .radio-box{
            padding:0 10px;
        }
        .cate .select-box{
            width: 40%;
        }
        #facearea{
            text-align: center;
            position: relative;
        }
        #facearea label{
            transition: all 0.5s ease;
        }
        #facearea span{
            transition: all 0.5s ease;
        }
        #facearea img{
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            z-index: 0;
        }
        #facearea[class~=face-active] label{
            opacity: 0;
        }
        #facearea[class~=face-active] span{
            opacity: 0;
        }
        h1,h2,h3,h4,h5{ padding: 0 !important;}
    </style>
    <script>
    var path="${contextPath}";
    var sts;
    sts="<option value>请选择</option>";
    $("#pId").html(sts);
    function show(type) {
    	
    	if (type=="") {
    		var sts;
    		sts="<option value>请选择</option>";
    		$("#pId").html(sts);
    	}else{ 
    		 $.ajax({
    			url : path+"/courses/coursesType_Subctype?typeOne="+type,
    			cache : false,
    			type : 'post',
    			dataType : 'json',
    			error : function() {
    				layer.alert("操作失败!");
    			},
    			success : function(message) {
    				console.log(message)
            		if(message.code == "200"){
                        var arr=message.message;
                        var str;
                        for(var i=0;i<arr.length;i++){
                        	str=str+"<option value="+arr[i].id+" >"+arr[i].coursesType+"</option>";
                        }
                        $("#pId").html(str);
     				}else if(message == "500"){
     					layer.alert("系统繁忙！");
     				}else{
     					layer.alert(message);
     				}
    			},complete: function(XMLHttpRequest, textStatus) {
    				layer.close(layer_load_window);
    			}
    	  });
     	}
    } 
    function submitCourses(){
        $("#jvForm").ajaxSubmit({
    		dataType : 'text',
            success: function(message){
            	
            		if(message == "200"){
                        layer.msg('上传成功，请等待管理员审核!',{icon:1,time:1000},function(){
                        	parent.window.location.reload();
                        });
     				}else if(message== "505"){
     					layer.alert("只有老师机构管理员才能操作");
     				}else if(message== "500"){
     					layer.alert(message.message);
     					parent.window.location.reload();
     				}else{
     					layer.alert(message.message);
     					parent.window.location.reload();
     				}
            },
            error: function(){
                layer.msg('操作失败!',{icon:5,time:1000});
            },complete: function(XMLHttpRequest, textStatus) {
            	
            }
        });
    }
        $(function () {

            var oVstart = document.getElementById('novideo');
            var oVloading = document.getElementById('loadvideo');
            var oVloadingBar = document.getElementById('videoloadbar');
            var oVloaded = document.getElementById('loadedvideo');
            var oVfailed = document.getElementById('failvideo');
            var oVfileBtn = document.getElementById('oVideo');
            var oStartLoadV = document.getElementById('startLoadVideo');
            var oVtext = document.getElementById('vText');
            var reloadBtn = document.getElementById('reloadvideo');
            var oPicBtn = document.getElementById('oImage');
            var oPicText = document.getElementById('picText');
            var oFaceimg = document.getElementById('facepic');
            var oFaceArea = document.getElementById('facearea');

            var videoArea = {};

            oVfileBtn.addEventListener('change', function () {
                if (this.files.length != 0) {
                    oVtext.innerText = this.files[0].name;
                    videoArea.file = this.files[0];
                } else {
                    oVtext.innerText = "请添加需要上传的视频";
                    videoArea.file = "";
                }
            });
            oStartLoadV.addEventListener('click', function () {
                if (!videoArea.file) {
                    alert("请先添加视频");
                    return;
                }
                $(oVstart).hide();
                $(oVloading).show();
                // 发起请求
                var oForm1 = new FormData();
                oForm1.append('file', videoArea.file);
                // 使用jQuery发送
                $.ajax({
                    type: "POST",
                    url: path+"/courses/uploadFile",
                    data: oForm1,
                    processData: false,
                    contentType: false,
                    dataType : 'json',
                    xhr: function () {
                        var xhr = $.ajaxSettings.xhr();
                        if (xhr.upload) {
                            xhr.upload.onprogress = function (progress) {
                                if (progress.lengthComputable) {
                                    console.log(progress.loaded / progress.total * 100);
                                    oVloadingBar.style.width = parseInt(progress.loaded / progress.total * 100) + '%';
                                }
                            };
                        }
                        return xhr;
                    },
                    success: function (data) {
                    	if(data.code == 200){
                    		$("#fileVideoName").val(data.message);
                    	}
                        $(oVloading).hide();
                        $(oVloaded).show();
                    },
                    error: function (data) {
                        $(oVloading).hide();
                        $(oVfailed).show();
                    },
                });
            });
            reloadBtn.addEventListener('click', function () {
                $(oVfailed).hide();
                $(oVstart).show();
            });
            // 封面显示地址
          /*   oPicBtn.addEventListener('change', function () {
                if (this.files.length != 0) {
                    $(this).addClass("face-active");
                    oPicText.innerText = this.files[0].name;
                    var reader = new FileReader();
                    var oImage = new Image();
                    reader.onload = function () {
                        oImage.onload = function () {
                            oFaceimg.src = this.src;
                        };
                        oImage.src = this.result;
                    }
                    var oImgae = new Image();
                    reader.readAsDataURL(this.files[0]);
                } else {
                    $(this).removeClass("face-active");
                    oPicText.innerText = "支持jpg,png格式的图片，图片不得大于2m";
                }
            }); */
            // 封面图移入移出
           /*  oFaceArea.addEventListener('mouseover', function () {
                if (oPicBtn.files.length != 0) {
                    $(this).removeClass("face-active");
                };
            });
            oFaceArea.addEventListener('mouseout', function () {
                if (oPicBtn.files.length != 0) {
                    $(this).addClass("face-active");
                };
            }); */
        });
   /*      function shows(type) {
    		if(type==2){
    			$("#select").show();
    			var inputObj = document.getElementById('seriesId');
    			if(inputObj.value != null){
    				inputObj.value='';
    			}else if(inputObj.value == null){
    				 layer.msg('请选择你要选择的课程!',{icon:5,time:1000});
    				 return false;
    			}
    			
    			
    		}else{
    			$("#select").hide();
    			 var obj = document.getElementById("seriesId");
    			 obj.selectedIndex = 0; 
    			 window.location.href="${contextPath}/coursesSeries/newCourses";
    		}
     } */
    </script>
</head>

<body>
    <div class="panel panel-default">
        <div class="panel-header">添加课程</div>
        <div class="panel-body">
            <div class="container">
                <div class="container row cl">
                    <div class="col-xs-2 col-sm-2 text-r">
                        <h3><small>课程视频：</small></h3>
                    </div>
                    <div id="loadvideo" style="display:none;" class="col-xs-6 col-sm-6">
                        <div class="panel-body bk-gray radius text-c va-m z-video">
                            <h3><small style="color:#000">正在上传视频</small></h3>
                            <div class="progress radius text-l">
                                <div class="progress-bar">
                                    <span id="videoloadbar" class="sr-only" style="width:0%"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="novideo" class="col-xs-6 col-sm-6">
                        <div class="panel-body bk-gray radius text-c va-m z-video z-noVideo">
                            <p id="vText">请添加需要上传的视频</p>
                            <label class="btn btn-primary radius" for="oVideo">浏览视频</label>
                            <input id="oVideo" type="file" accept="video/*" name="video" style="display:none" class="input-file">
                            <input type="button" id="startLoadVideo" class="btn btn-primary radius" value="开始上传">
                        </div>
                    </div>
                    <div id="loadedvideo" class="col-xs-6 col-sm-6" style="display:none;">
                        <div class="panel-body bk-gray radius text-c va-m z-video z-noVideo">
                            <svg class="iconload" style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3178">
                                <path d="M953.8 452.3c-10-12-28-13.6-40-3.6L679.4 644.5l-77.1-92.3c-10-12-28-13.6-40-3.6s-13.6 28-3.6 40L652.6 701c2.7 3.2 6 5.6 9.5 7.3 10 5.8 23.1 5.2 32.5-2.6l255.5-213.5c12.1-9.9 13.7-27.9 3.7-39.9z"
                                    fill="#1195FE" p-id="3179"></path>
                                <path d="M521.2 673.4H247.5c-74 0-137.3-55.8-144.2-127.1-3.4-40.3 9.7-78.7 36.8-108.1 26.7-29.1 64.8-45.7 104.4-45.7h12.9l28.4 1.8 8.9-26.7c31.7-90.7 114.8-149.2 211.8-149.2C632 218.4 734 320.5 734 445.9v7.3c0 12.5 8.7 21.2 21.2 21.2s21.2-8.7 21.2-21.2v-7.3c0-36.3-7.2-71.6-21.3-104.9-13.6-32.1-33.2-61-58-85.8-24.8-24.8-53.7-44.4-85.8-58-33.3-14.1-68.6-21.3-104.9-21.3-57.2 0-111.3 17.1-156.4 49.5-43.6 31.3-76.1 74.8-94.2 126.1h-9.9c-55.7 0-108 24.5-143.5 67.2-16.8 20.2-28.7 43.1-35.5 68-7.1 26.2-8.2 53.2-3.1 80.4 8 42.3 31.2 80.4 65.3 107.5 33.6 26.6 76.1 41.3 119.7 41.3H521c12.5 0 21.2-8.7 21.2-21.2s-8.5-21.3-21-21.3z"
                                    fill="#1195FE" p-id="3180"></path>
                            </svg>
                            <span>上传完成</span>
                        </div>
                    </div>
                    <div id="failvideo" class="col-xs-6 col-sm-6" style="display:none;">
                        <div class="panel-body bk-gray radius text-c va-m z-video z-noVideo">
                            <svg class="iconload" style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="622">
                                <path d="M820.096 680.4096 571.4752 259.1296c-26.56-44.3904-92.96-44.3904-119.5264 0l-247.8784 421.28c-26.56 44.3904-8.2624 117.7472 44.864 117.7472l525.5552 0C827.6032 798.1632 846.656 724.8 820.096 680.4096zM516.1088 384.7424c15.6672 0 25.344 18.8992 23.9616 35.9488l-17.5104 198.1632-13.824 0-15.6672-198.1632C492.1408 404.096 501.3568 384.7424 516.1088 384.7424zM517.4848 699.0336c-14.2848 0-25.8048-11.52-25.8048-25.8048 0-14.2784 11.52-25.8048 25.8048-25.8048s25.8048 11.5264 25.8048 25.8048C543.296 687.5136 531.776 699.0336 517.4848 699.0336z"
                                    fill="#d81e06" p-id="623"></path>
                            </svg>
                            <p>上传失败</p>
                            <input id="reloadvideo" class="btn btn-primary radius" style="margin-top:0;" type="button"
                                value="重新上传">
                        </div>
                    </div>
                </div>
                <form action="${contextPath}/courses/course_add" method="post" class="form form-horizontal" id="jvForm"
                    enctype="multipart/form-data">
                     <input type="hidden" name="fileName" id="fileVideoName" value="">
                    <!-- <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small>课程封面：</small></h3>
                        </div>
                        <div class="col-xs-6 col-sm-6">
                            <div id="facearea" class="panel-body bk-gray radius text-c va-m z-img">
                                <img id="facepic" src="" alt="">
                                <label style="position:relative;z-index:2;" class="btn btn-primary radius" for="oImage">上传封面</label>
                                <input id="oImage" type="file" accept="image/*" name="pic" style="display:none" class="input-file">
                                <span style="position:relative;z-index:2;" id="picText">支持jpg,png格式的图片，图片不得大于2m</span>
                            </div>
                        </div>
                    </div> -->
                    <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small>课程名称：</small></h3>
                        </div>
                        <div class="col-xs-5 col-sm-5">
                            <input type="text" name="totalTitle" placeholder="请输入课程一级标题" class="col-xs-6 col-sm-6 input-text radius">
                        </div>
                        <!--  <div class="col-xs-5 col-sm-5">
                            <input type="text" name="coursetitleTwo" placeholder="请输入课程二级标题（选填）" class="col-xs-6 col-sm-6 input-text radius">
                        </div>  -->
                    </div>
                   <!--   <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small>讲师姓名：</small></h3>
                        </div>
                        <div class="col-xs-5 col-sm-5">
                            <input type="text" name="teacher" placeholder="请输入讲师姓名" class="col-xs-6 col-sm-6 input-text radius">
                        </div>
                    </div>  -->
                    <!-- <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small>艺术专业：</small></h3>
                        </div>
                        <div class="col-xs-5 col-sm-5">
                            <span class="select-box radius">
                                <select class="select" size="1" name="courseTypeOne"  onchange="show(this.options[this.options.selectedIndex].value)">
                                   <option value="" >请选择</option>
									<#list coursesType as list>
										<option value="${list.id}">${list.coursesType}</option>
									</#list>
                                </select>
                            </span>
                        </div>
                        <div class="col-xs-5 col-sm-5">
                            <span class="select-box radius">
                                <select class="select"  name="courseTypeTwo" id="pId">
                                    <option value="" selected="">请选择</option>
                                    <option value="1">菜单一</option>
                                    <option value="2">菜单二</option>
                                    <option value="3">菜单三</option>
                                </select>
                            </span>
                        </div>
                    </div> -->
                      <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small>是否付费：</small></h3>
                        </div>
                        <div class="col-xs-5 col-sm-5">
                            <div class="radio-box">
                                <input type="radio" id="free"  name="isPrice" value="2" checked>
                                <label for="free">是</label>
                            </div>
                            <div class="radio-box">
                                <input type="radio"  id="notfreee" name="isPrice" value="1">
                                <label for="notfreee">否</label>
                            </div>
                        </div>
                    </div>
                 <!--    <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small>系列课：</small></h3>
                        </div>
                        <div class="col-xs-5 col-sm-5">
                            <div class="radio-box">
                                <input type="radio" id="free" onclick="shows(2)" name="isPays" value="1" checked>
                                <label for="free">是</label>
                            </div>
                            <div class="radio-box">
                                <input type="radio" onclick="shows(1)" id="notfreee" name="isPayb" value="2">
                                <label for="notfreee">否</label>
                            </div>
                        </div>
                    </div> -->
                     <div class="container row cl">
                    <div class="col-xs-5 col-sm-5" id="select">
                    	 <span class="select-box radius">
                                <select class="select" style="text-align: center; text-align-last: center;"  size="1" name="seriesId" id="seriesId">
										<option value="${coursesSeries.id}">${coursesSeries.totalTitle}</option>
                                </select>
                            </span><br>
                    </div>
                    </div>
                    <!-- <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small>课程共享：</small></h3>
                        </div>
                        <div class="col-xs-10 col-sm-10">
                            <div class="radio-box">
                                <input type="radio" id="jigou" name="courseShare" value="1" checked>
                                <label for="jigou">机构专供</label>
                            </div>
                            <div class="radio-box">
                                <input type="radio" id="pingtai" name="courseShare" value="2">
                                <label for="pingtai">平台共享</label>
                            </div>
                            <div class="radio-box">
                                <input type="radio" id="jp" name="courseShare" value="3">
                                <label for="jp">机构内部免费，平台共享收费</label>
                            </div>
                        </div>
                    </div> -->
                   <!--  <div class="container row cl">
                        <div class="col-xs-2 col-sm-2 text-r">
                            <h3><small><span style="color:red;">*</span>课程描述：</small></h3>
                        </div>
	                       <div class="formControls col-xs-6 col-sm-6">
				
				<textarea cols="80" id="content" name="courseintroduction" ></textarea> 
             			<script type="text/javascript">
	            			 window.onload = function(){ 
	            				 CKEDITOR.replace('content',{filebrowserUploadUrl : path+'/ckeditor/uploader?Type=File&prodId=1111&uploadModel=product',filebrowserImageUploadUrl : path+'/ckeditor/uploader?Type=Image&prodId=${1111}&uploadModel=product',filebrowserFlashUploadUrl : path+'/ckeditor/uploader?Type=Flash&prodId=${1111}&uploadModel=product'});
          				 	  }
           				 </script>
					</div>
                    </div> -->
                    <div class="container row cl">
                        <div class="col-xs-10 col-sm-10 col-xs-offset-2 col-sm-offset-2 ">
                            <!-- 富文本位置 -->
                            <input type="button" style="width:100px;" onclick="submitCourses()" class="btn btn-primary radius" value="保存">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<@frame.end "default">
</@frame.end>
</html>